<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div class="nubs">{{ doctorList }}</div>
          <div class="types">当前医生数</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs">{{ patientList }}</div>
          <div class="types">当前患者数</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs">{{ hospitalList }}</div>
          <div class="types">活动医院数</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs">{{ articleList }}</div>
          <div class="types">当前文章数</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="6">
        <el-card>
          <div class="nubs routecard" @click="$router.push({ path: '/doctor_patient/physician/certification' })">{{ doctorAuditList }}</div>
          <div class="types">待审核医生</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs routecard" @click="$router.push({ path: '/sunshine/contract/index' })">{{ contractList }}</div>
          <div class="types">待后台签署合同</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs routecard" @click="$router.push({ path: '/doctor_patient/material' })">{{ materialList }}</div>
          <div class="types">待处理物料申请</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="nubs routecard" @click="$router.push({ path: '/sunshine/task/voucher' })">{{ voucherListAll - voucherList }}</div>
          <div class="types">待审核任务凭证</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <strong>每日新增医生</strong>
      </div>
      <div id="chart" style="height: 380px;"></div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <strong>每日新增患者</strong>
      </div>
      <div id="chart2" style="height: 380px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import { listPatient } from '@/api/patient'
import { selectDoctorList, selectDoctorNum } from '@/api/doctor'
import { listContract } from "@/api/sunshine/contract"
import {selectPatientNum } from '@/api/patient'
import { GetArticleList } from '@/api/healthy/article'
import { listHospital } from '@/api/hospital/hospital'
import { listMaterial } from "@/api/material/material"
import { listVoucher } from "@/api/sunshine/voucher"

require('echarts/theme/macarons') // echarts theme

const animationDuration = 6000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
  },
  created() {
    this.getDoctor()
    this.getDoctor({auditStatus: 0}, "doctorAuditList")
    this.getContract()
    this.getMaterial()
    this.getVoucherAll()
    this.getVoucher()
    this.getPatient()
    this.getArticleList()
    this.getListHospitalList()
    this.getDoctorNum()
    this.getPatientNum()
  },
  data() {
    return {
      chart: null,
      chart2: null,
      value: new Date(),
      queryParams: {
        pageNum: 1,
        pageSize: 1,
      },
      loading: false,
      dataDate: [],
      dataNum: [],
      dataPatientDate: [],
      dataPatientNum: [],
      doctorList: undefined,
      doctorAuditList: undefined,
      materialList: undefined,
      contractList: undefined,
      voucherList: 0,
      voucherListAll: 0,
      doctorNumList: undefined,
      patientNumList: undefined,
      articleList: undefined,
      patientList: undefined,
      hospitalList: undefined,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getDoctor(otherParams = {}, filedName = "doctorList") {
      this.loading = true
      selectDoctorList({...this.queryParams, ...otherParams}).then((res) => {
        this[filedName] = res.total
        this.loading = false
      })
    },
    // 获取待审核合同
    getContract() {
			this.loading = true;
			listContract({...this.queryParams, status: 1}).then(response => {
				this.contractList = response.total;
        this.loading = false;
			});
		},
    // 获取物料申请
    getMaterial() {
			this.loading = true;
			listMaterial({...this.queryParams, status: 0}).then(response => {
				this.materialList = response.total;
				this.loading = false;
			});
		},
    // 获取已审核任务凭证
    getVoucher() {
			this.loading = true;
			listVoucher({...this.queryParams, finalStatus: 0}).then(response => {
				this.voucherList = response.total;
				this.loading = false;
			});
		},
    // 获取所有任务凭证
    getVoucherAll() {
			this.loading = true;
			listVoucher({...this.queryParams}).then(response => {
				this.voucherListAll = response.total;
				this.loading = false;
			});
		},
    getDoctorNum() {
      this.loading = true
      selectDoctorNum().then((res) => {
        this.doctorNumList = res.rows
        this.loading = false
        for (var i = 0; i < this.doctorNumList.length; i++) {
          this.dataDate.push(
            this.doctorNumList[i].days.toString().substr(0, 10),
          )
          this.dataNum.push(this.doctorNumList[i].num.toString())
        }
        this.initChart()
        // console.log(this.dataDate)
        // console.log(this.dataNum)
      })
    },
    getPatientNum() {
      this.loading = true
      selectPatientNum().then((res) => {
        this.patientNumList = res.rows
        this.loading = false
        for (var i = 0; i < this.patientNumList.length; i++) {
          this.dataPatientDate.push(
            this.patientNumList[i].days.toString().substr(0, 10),
          )
          this.dataPatientNum.push(this.patientNumList[i].num.toString())
        }
        this.initChart2()
        // console.log(this.dataDate)
        // console.log(this.dataNum)
      })
    },
    getPatient() {
      this.loading = true
      listPatient(this.queryParams).then((res) => {
        this.patientList = res.total
        this.loading = false
      })
    },
    getListHospitalList() {
      let param = {
        pageNum: 1,
        pageSize: 10,
        status: 'enable',
      }
      this.loading = true
      listHospital(param).then((res) => {
        this.hospitalList = res.total
        this.loading = false
      })
    },
    getArticleList() {
      this.loading = true
      GetArticleList(this.queryParams).then((res) => {
        this.articleList = res.total
        this.loading = false
      })
    },
    gotoDocker() {
      this.$router.push({ path: '/doctor_patient/physician/certification' });
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'), 'macarons')
      this.chart.setOption({
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['新增数'],
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            name: '日期',
            show: true,
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#333',
                width: 2,
              },
              symbol: ['none', 'arrow'],
            },
            data: this.dataDate,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            show: true,
            axisLine: {
              lineStyle: {
                color: '#333',
                width: 2,
              },
              symbol: ['none', 'arrow'],
            },
          },
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            areaStyle: {},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            smooth:false,
            data: this.dataNum,
          },
        ],
      })
    },
    initChart2() {
      this.chart2 = echarts.init(document.getElementById('chart2'), 'macarons')
      this.chart2.setOption({
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['新增数'],
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            name: '日期',
            show: true,
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#333',
                width: 2,
              },
              symbol: ['none', 'arrow'],
            },
            data: this.dataPatientDate,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            show: true,
            axisLine: {
              lineStyle: {
                color: '#333',
                width: 2,
              },
              symbol: ['none', 'arrow'],
            },
          },
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            areaStyle: {},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            smooth:false,
            data: this.dataPatientNum,
          },
        ],
      })
    },
  },

}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
  height: 550px;
}

.nubs {
  font-size: 38px;
  color: #3bcac4;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 2px;
}

.routecard {
  cursor: pointer;
}

.types {
  font-size: 20px;
  color: #5e5e5e;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
</style>
